﻿
@model MSAcademic.v2.Web.Models.ArticleViewModel

@{
    ViewBag.Title = Model.Article.Title;
}
@section FacebookCustomMeta {
    <meta property="og:title" content="@Model.Article.Title" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="@Url.RouteUrl("ArticleProfile", new { articleId = Model.Article.Id, articleTitle = ViewData["UrlFriendlyTitle"] }, Request.Url.Scheme)" />
    <meta property="og:image" content="@Model.Article.PictureUrlNormal" />
    <meta property="og:site_name" content="msacademic.hr" />
    <meta property="og:description" content="@ViewData["StrippedShortText"]" />

    <meta property="article:published_time"  content="@(Model.Article.PublishedOn.HasValue 
                                                      ? Model.Article.PublishedOn.Value.ToString()
                                                      : "")"> 
    <meta property="article:author"          content="@Url.RouteUrl("ViewAuthorProfile", new { authorId = Model.Author.Id }, Request.Url.Scheme)">

    <meta property="fb:app_id" content="345694805481703" />    
}

<script src="~/Scripts/waypoints.min.js"></script>
<script type="text/javascript">
    $(function () {
        var headers         =   $('h2'),
            headerJmpList   =   $('.sidebar .ui-jump-list');
        
        /* Generates a jumpList for h2 elems in the article */
        msacademic.jumpListFor(headers, headerJmpList);

        /* Bind header waypoints */
        headers.waypoint(function (event, direction) {
            var jmpItemId = $(this).attr("jumpId"),
                jmpItem = headerJmpList.find('[jumpId="' + jmpItemId + '"]');

            headerJmpList.find('li').removeClass('active');
            
            if(direction === "down") {
                jmpItem.addClass('active');
            } else {
                jmpItem.prev().addClass('active');
            }
        }, { offset: '10%' });

        /* Make the jump list sticky */
        $('.articleBody .sidebar .ui-jump-list').waypoint(function (event, direction) {
		    $(this).parent().toggleClass('sticky', direction === "down");
		    event.stopPropagation();
        }, { offset: 83 });

        $('.article .facebook-integration').waypoint(function (event, direction) {
            if(direction === "down") {
                headerJmpList.parent().removeClass('sticky').addClass('bottom-reached');
            } else {
                headerJmpList.parent().removeClass('bottom-reached').addClass('sticky');
            }
        }, {
            offset: 330
        });

    });
</script>

<div class="article">

    <h1 class="big-title">@Model.Article.Title</h1>
    <div class="date-time">
        Piše @Html.RouteLink(Model.Author.FirstName + " " + Model.Author.LastName, "ViewAuthorProfile", new { authorId = Model.Author.Id }) - 
        @(Model.Article.PublishedOn.HasValue 
            ?  @Model.Article.PublishedOn.Value.ToString("dd.MM.yyyy. u HH:mm")  
            : "Članak nije objavljen")
    </div>
    
    <div class="short-text">
        @Html.Raw(Model.Article.ShortText)
    </div>

    <div class="author">
        <a href="@Url.RouteUrl("ViewAuthorProfile", new { authorId = Model.Author.Id })">
            <img src="@Model.Author.ProfilePictureUrl" />
            <div class="disc"></div>
        </a>
    </div>

    <div class="image-mirrorlete clearfix">
        <div class="full"> <img src="@Model.Article.PictureUrlNormal" alt="@Model.Article.Title" /> </div>
        <div class="semi"> <img src="@Model.Article.PictureUrlNormal" alt="@Model.Article.Title" /> </div>
        <div class="light"> <img src="@Model.Article.PictureUrlNormal" alt="@Model.Article.Title" /> </div>
    </div>

    <div class="tags">
        <ul class="clearfix">
        @foreach(var tag in Model.ArticleTags)
        {
            <li> <a href="@Url.RouteUrl("SearchViaUri", new { title = @tag.Name })"> @tag.Name </a></li>
        }
        </ul>
    </div>
    
    <div class="articleBody clearfix">
        <div class="sidebar">
            <div class="sidebar-content">
                <div class="ui-jump-list"></div>
                <div class="meta">
                    <a href="@Url.RouteUrl("ViewAuthorProfile", new { authorId = Model.Author.Id })"> @Model.Author.FirstName @Model.Author.LastName </a>  <br />
                    @Model.Article.LongText.Length HTML znakova
                </div>
                <div class="fb-like" data-href="@Url.RouteUrl("ArticleProfile", new { articleId = Model.Article.Id,  articleTitle = ViewData["UrlFriendlyTitle"]  }, Request.Url.Scheme)" data-send="false" data-layout="button_count" data-width="150" data-show-faces="true"></div>
            </div>
        </div>
        <div class="long-text"> 
            <div class="wrap">
                <h2 class="hidden">Idi na vrh </h2>
                @Html.Raw(Model.Article.LongText) 
                <h2 class="hidden">Komentari</h2>
            </div>
        </div>
    </div>

    <div class="facebook-integration">
        <div class="fb-like-wrapper clearfix">
            <div class="fb-like" data-href="@Url.RouteUrl("ArticleProfile", new { articleId = Model.Article.Id,  articleTitle = ViewData["UrlFriendlyTitle"]  }, Request.Url.Scheme)" 
                data-send="false" data-layout="button_count" data-width=250" data-show-faces="false" data-font="segoe ui"></div>
            <p>Preporuči članak na Facebook-u</p>
        </div>
        <div class="fb-comments" data-href="@Url.RouteUrl("ArticleProfile", new { articleId = Model.Article.Id,  articleTitle = ViewData["UrlFriendlyTitle"]  }, Request.Url.Scheme)" data-width="890" data-num-posts="10"></div>
    </div>
</div>
